<template>
  <view @tap="handleItemClick" class="bg-white rounded-[16rpx] p-[24rpx] shadow-sm relative flex flex-col hover:shadow-md transition-all duration-200 border border-[#e0e0e0]">
    <view>
      <view class="order-header flex justify-between mb-[16rpx] items-start">
        <view class="order-title text-[28rpx] font-bold flex-1 text-[#222]">{{ item.position_name }} </view>
        <view class="text-[22rpx] px-[20rpx] py-[8rpx] rounded-[16rpx] font-medium bg-gradient-to-r from-[#e3f2fd] to-[#bbdefb] text-[#2196F3]">
          {{ change(item.status) }}
        </view>
      </view>

      <view class="item-meta flex mb-[12rpx] flex-wrap gap-x-[16rpx] gap-y-[8rpx]">
        <view class="meta-item flex items-center text-[22rpx] text-[#666]">
          <IconFont name="locationg3" class="mr-[8rpx] text-[#165DFF]" size="12" />
          <text>{{ item.location }}</text>
        </view>
        <view class="meta-item flex items-center text-[22rpx] text-[#666]">
          <IconFont font-class-name="iconfont" class-prefix="icon" name="building" class="text-blue-500 text-[40rpx] mr-1" size="12" />
          <text>{{ item.corporate_name }}</text>
        </view>
      </view>
      <view class="item-footer flex flex-col mt-[16rpx]">
        <view class="grid grid-cols-1 gap-[16rpx] mb-[18rpx] text-[24rpx]">
          <view class="flex gap-2">
            <span class="text-[#999]">录用人数</span>
            <span class="text-[#52c41a] font-bold">{{ item.number }}人</span>
          </view>
          <view class="text-[24rpx] text-[#666]">职位描述：{{ item.description }}</view>
        </view>

        <view class="flex flex-wrap gap-[16rpx] mb-[18rpx] text-[24rpx] text-[#666] justify-between">
          <view>要求：{{ item.experience }}</view>
          <view>
            日薪：<text class="text-[#ff0000]">¥{{ item.amount }}</text>
          </view>
        </view>

        <!-- 元信息 -->
        <view class="flex justify-between text-[22rpx] text-[#999] mb-[18rpx]">
          <view>开始时间：{{ item.start_date }}</view>
          <view>截止时间：{{ item.end_date }}</view>
        </view>
      </view>
    </view>

    <!-- 底部操作区 -->
    <view class="flex justify-end items-center mt-[16rpx] pt-[16rpx] border-t border-[#e0e0e0] gap-[12rpx]">
      <nut-button size="small" type="info" @click.stop="handleViewDetails" class=""> 查看详情 </nut-button>
      <!-- <nut-button size="small" type="primary" @click.stop="handleConfirm"
        class="flex-1 !bg-[#4caf50] !border-[#4caf50] !rounded-[8rpx] !py-[10rpx] !font-medium hover:!bg-[#45a049]">
        确认上岗
      </nut-button> -->
      <nut-button v-if="item.memberStatus == 5" size="small" disabled class=""> 已取消 </nut-button>
      <nut-button v-else size="small" type="warning" @click.stop="handleCancel" class=""> 取消报名 </nut-button>
    </view>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { Button as nutButton } from "@nutui/nutui-taro";
import { IconFont } from "@nutui/icons-vue-taro";
import { post } from "@/utils/request";

// 接收父组件传入的单个日结招聘项数据
const props = defineProps({
  item: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

/**
 * 格式化时间显示
 * @param {string} timeStr - 时间字符串
 * @returns {string} 格式化后的时间
 */
const formatTime = (timeStr) => {
  if (!timeStr) return "未知时间";

  try {
    const date = new Date(timeStr);
    const now = new Date();
    const diffMs = now - date;
    const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

    if (diffDays === 0) {
      return "今天";
    } else if (diffDays === 1) {
      return "昨天";
    } else if (diffDays < 7) {
      return `${diffDays}天前`;
    } else {
      // 返回月-日格式
      return `${date.getMonth() + 1}-${date.getDate()}`;
    }
  } catch (error) {
    return timeStr;
  }
};

// 向父组件传递事件
const emit = defineEmits(["click", "viewDetails", "confirm", "cancel", "reload"]);

// 处理整个项点击
const handleItemClick = () => {
  emit("click", props.item);
};

// 处理查看详情
const handleViewDetails = () => {
  emit("viewDetails", props.item);
};

// 处理确认上岗
const handleConfirm = () => {
  emit("confirm", props.item);
};

// 处理取消报名
const handleCancel = () => {
  Taro.showModal({
    title: "确认取消",
    content: "确定要取消报名吗？",
    success: (res) => {
      if (res.confirm) {
        post("/recruitmentDaily/updateSignUp", {
          // id: props.item.rmId,
          id: props.item.rid,
          status: 5,
        }).then((res) => {
          if (res.code == 0) {
            Taro.showToast({
              title: "取消",
              icon: "success",
            });
            emit("reload");
          } else {
            Taro.showToast({
              title: res.msg,
              icon: "error",
            });
          }
        });
        //emit("giveUp", props.item);
      }
    },
  });
};

//状态转换方法
const change = (item) => {
  //console.log("item为",item)
  switch (item) {
    case 1:
      return "进行中";
    case 2:
      return "待确认完成";
    case 0:
      return "发布中";
    case 6:
      return "已评价";
    default:
      return "未知状态";
  }
};
</script>
